<script setup>
import { onMounted, onUnmounted } from 'vue'
import { Viewer } from 'cesium'
import { addTdtImagery } from '@/script/cesium/imageryLayers/wmts'
import { disableTrackedEntity } from '@/script/utils/handler'

let viewer
const emit = defineEmits(['created'])
// 初始化cesium地球
const initCesiumMap = () => {
  viewer = new Viewer('cesiumContainer', {
    infoBox: false, // 关闭cesium右下角的信息框
    animation: false, // 隐藏动画控件
    baseLayerPicker: false, // 隐藏图层选择控件
    baseLayer: false,
    fullscreenButton: false, // 隐藏全屏按钮
    vrButton: false, // 隐藏VR按钮，默认false
    geocoder: false, // 隐藏地名查找控件
    homeButton: false, // 隐藏Home按钮
    sceneModePicker: false, // 隐藏场景模式选择控件
    selectionIndicator: false, // 显示实体对象选择框，默认true
    timeline: false, // 隐藏时间线控件
    navigationHelpButton: false, // 隐藏帮助按钮
    scene3DOnly: true, // 每个几何实例将只在3D中呈现，以节省GPU内存
    shouldAnimate: true, // 开启动画自动播放
    sceneMode: 3, // 初始场景模式 1：2D 2：2D循环 3：3D，默认3
    requestRenderMode: true, // 减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率
    // 如场景中的元素没有随仿真时间变化，请考虑将设置maximumRenderTimeChange为较高的值，例如Infinity
    maximumRenderTimeChange: Infinity,
    msaaSamples: 2 // 多采样抗锯齿的速率,典型的多采样率是每像素2、4，有时是8个采样。MSAA的更高采样率可能会影响性能，以换取更好的视觉质量。此值仅适用于支持多采样渲染目标的WebGL 2上下文。
  })
  // 创建成功后抛出cesium核心类viewer
  console.log('创建cesium地球成功！')

  // viewer.geocoder._form.children[0].placeholder = '请输入地址'
  // 设置默认缩放大小的默认量
  // viewer.camera.defaultZoomAmount = 1000000.0
  // 是否允许用户放大和缩小
  viewer.scene.screenSpaceCameraController.enableZoom = true
  // 是否禁止摄像机进入地下
  // viewer.scene.screenSpaceCameraController.enableCollisionDetection = true

  viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100 //相机的高度的最小值
  viewer.scene.screenSpaceCameraController.maximumZoomDistance = 220000000 //相机高度的最大值
  //   viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000 // 设置相机缩小时的速率
  //   viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000 //设置相机放大时的速率

  //隐藏cesium的logo
  viewer.cesiumWidget.creditContainer.style.display = 'none'
  //删除默认bing底图
  //   viewer.imageryLayers.remove(viewer.imageryLayers.get(0))
  //添加天地图底图
  toggleBottomMap()
  // 禁用实体双击追踪
  disableTrackedEntity(viewer)
  emit('created', viewer)
}

const toggleBottomMap = type => {
  viewer.imageryLayers.remove(viewer.imageryLayers.get(0), true)
  viewer.imageryLayers.remove(viewer.imageryLayers.get(0), true)
  //添加天地图底图
  addTdtImagery(viewer, {
    type: type || 'img', // 底图类型，影像-img，矢量-vec
    env: changeEnv(), // 环境可选开发'dev'，测试'test'，预生产'pre',生产'master',用来匹配内置的天地图秘钥，默认dev
    isLabel: true // 是否隐藏地图标注，true默认显示，false隐藏标注
  })
}

const changeEnv = () => {
  if (import.meta.env.MODE === 'development') {
    return 'dev'
  } else if (import.meta.env.MODE === 'test') {
    return 'test'
  } else {
    return 'master'
  }
}

onMounted(() => {
  console.log('开始初始化cesium地球！')
  initCesiumMap()
})
onUnmounted(() => {
  console.log('开始销毁cesium地球！')
  if (typeof viewer !== 'undefined' && viewer !== null) {
    // 停止动画循环
    // viewer.clock.stop()

    // 移除所有的实体
    viewer.entities && viewer.entities.removeAll()

    // 清理其他附加的数据源，例如GeoJSON数据源
    viewer.dataSource && viewer.dataSource.removeAll(true)
    viewer.dataSource && viewer.dataSource.destroy()

    // 移除imagery layers
    while (viewer.imageryLayers.length > 0) {
      viewer.imageryLayers.remove(viewer.imageryLayers.get(0))
    }
    viewer.imageryLayers.destroy()

    // 移除地面覆盖物
    if (viewer.baseLayerPicker) {
      viewer.baseLayerPicker.viewModel.selectedImagery = undefined
    }

    // 清理监听器和其他附加组件
    // viewer.cesiumWidget.destroy()

    // 最后销毁Viewer实例
    if (!viewer.isDestroyed()) {
      viewer.destroy()
    }

    viewer = null
    console.log('销毁cesium地球完毕！')
  }
})

defineExpose({
  toggleBottomMap
})
</script>
<template>
  <div id="cesiumContainer"></div>
</template>
<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>
